<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在html中友好的显示json字符串</title>
    <style>
        pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
        .string { color: green; }        /*字符串的样式*/
        .number { color: darkorange; }    /*数字的样式*/
        .boolean { color: blue; }        /*布尔型数据的样式*/
        .null { color: magenta; }        /*null值的样式*/
        .key { color: red; }            /*key值的样式*/
    </style>
</head>
<body>

<pre id="result"></pre>

<script src="lib/jquery-3.4.1.js"></script>
<script>

    $(function () {

        let json_str = `{"total":22,"rows":[{"id":36,"data_id":48,"serial_number":"234242342-ljlkjsldjf","orig_serial_number":null,"ucnt_table_id":"database.gs","target_sys_id":"ky_test_3307","target_table_id":"test.gs","target_table_name":"公司表","push_state":"等待推送","operate_type":1,"excp_msg":null,"create_time":"2019-11-06 10:58:54","create_user":"admin","target_sys_name":"测试","push_data":"[{\\"bm\\":56210540,\\"mc\\":\\"滴滴滴滴网点\\",\\"where\\":{\\"bm\\":5343224}},{\\"bm\\":535345,\\"mc\\":\\"某公司\\",\\"where\\":{\\"bm\\":23234}}]"}],"footer":[]}`;

        // syntaxHighlight() 函数的参数，直接为ajax返回的json对象即可
        $("#result").html(syntaxHighlight(JSON.parse(json_str)));
    });



    function syntaxHighlight(json) {
        if (typeof json != 'string') {
            json = JSON.stringify(json, undefined, 2);
        }
        json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
            function (match) {
                var cls = 'number';
                if (/^"/.test(match)) {
                    if (/:$/.test(match)) {
                        cls = 'key';
                    } else {
                        cls = 'string';
                    }
                } else if (/true|false/.test(match)) {
                    cls = 'boolean';
                } else if (/null/.test(match)) {
                    cls = 'null';
                }
                return '<span class="' + cls + '">' + match + '</span>';
            }
        );
    }
</script>
</body>
</html>